<template>
  <div class="event-box">
    <a-scrollbar style="height: 863px; width: 350px; overflow: auto">
      <div class="one">
        <div class="even-list">
          <a-space direction="vertical" size="large">
            <a-select
              :style="{ width: '300px', marginRight: '50px' }"
              placeholder="请选择地点"
              v-model="addressValue"
              @change="handelSelect"
            >
              <a-option v-for="per in pressureList">{{ per.region }}</a-option>
            </a-select>
          </a-space>
          <div class="box" v-for="(pressure, index) in pressureDetailList">
            <div
              class="per-card"
              :class="[(pressure.pressure as unknown as number) > 0.25 ? red : yellow]"
              @click="handelCardData(index)"
            >
              <div class="title">{{ pressure.region }}</div>
              <div class="time">
                <span class="times"> {{ pressure.turnoverTime }} </span>
                <span class="continue-time"
                  >持续时间{{ pressure.electricQuantity }}分钟</span
                >
              </div>
              <div class="perUp">
                <span class="perUp-left">
                  {{
                    (pressure.pressure as unknown as number) > 0.25
                      ? "压力高限"
                      : "压力低限"
                  }}
                </span>
                <i
                  class="num"
                  :class="[(pressure.pressure as unknown as number) > 0.25 ? colorRed : colorYellow]"
                  >{{ pressure.pressure }}</i
                >
                <span class="perUp-right"> Mps </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-scrollbar>
    <div class="com">
      <PressureMap />
      <PressureChart v-if="pressureStore.chartDataObj.length" />
      <h1 v-else class="h1">请选择区域查看统计图表</h1>
    </div>
    <AlarmDetail />
  </div>
</template>

<script lang="ts" setup>
// 组件
import PressureMap from "./components/PressureMap.vue";
import PressureChart from "./components/PressureChart.vue";
import AlarmDetail from "./components/AlarmDetail.vue";

import { getPressure, getPressureT } from "../../api/eventList/event";
import { Pressure } from "../../types/tanTypes/pressure";
import { reactive, ref } from "vue";

import { usePressureStore } from "../../store/pressure";
const pressureStore = usePressureStore();
// 样式
const red = "red";
const yellow = "yellow";
const colorRed = "colorRed";
const colorYellow = "colorYellow";

// 请求水压接口
interface PressureApi {
  pressureList: Array<Pressure>;
}

// 水压详情列表 初始化使用
const pressureDetailList = ref<Array<Pressure>>([]);
const pressureList = ref<Array<Pressure>>([] as any);
getPressure().then((res) => {
  pressureList.value = res.data.results;
  pressureDetailList.value = res.data.results;
});

// 根据地点查询
const addressValue = ref<string>("");
const handelSelect = () => {
  getPressureT(addressValue.value).then((res) => {
    pressureDetailList.value = res.data.results;
  });
};

// 实例化水压状态机
const handelCardData = (index: number) => {
  pressureStore.addPressureObjActions((pressureDetailList.value as any)[index]);
  pressureStore.queryAddressPressureValue(
    (pressureDetailList.value as any)[index].region,
    (pressureDetailList.value as any)[index].turnoverTime.slice(0, 5)
  );
};
</script>

<style lang="scss" scoped>
.event-box {
  display: flex;
  width: 1684px;
  height: 872px;
  margin-top: 80px;

  .even-list {
    padding: 20px;
    width: 350px;
    margin-right: 20px;
    height: 100%;
    margin-right: 10px;
  }

  .even-list::-webkit-scrollbar {
    display: none;
  }

  .select {
    width: 200px;
    background-color: #fff;
    text-align: left;
  }

  .btn {
    border: 1px solid #ccc;
  }

  .per-card {
    width: 260px;
    height: 100px;
    border-radius: 3px;
    //border-left: 5px solid orangered;
    padding: 10px;
    margin: 5px 0;

    .title {
      font-size: 18px;
      margin-bottom: 15px;
    }

    .perUp,
    .time {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;

      .num {
        margin-left: 98px;
      }
    }
  }

  .per-card:hover {
    background-color: #ebf5ff;
    cursor: pointer;
  }
}

.one {
  border: 5px solid #ebf5ff;
}

.box {
  color: #000;
}

.red {
  border-left: 5px solid orangered;
}

.yellow {
  border-left: 5px solid yellow;
}

.colorRed {
  color: red;
}

.colorYellow {
  color: #ffcc00;
}

.com {
  display: flex;
  flex-direction: column;
}

.h1 {
  color: #000;
}
</style>
